<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<meta name="format-detection" content="telephone=no">
	<title>阅读分享</title>
	<link rel="stylesheet" href="http://xhh.wasd1.cn/static/css/base.css">
	<link rel="stylesheet" href="../css/icon.css">
	<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div id="read" class="flexv wrap">
	<div class="flex center head">
		<a href="javascript:;" class="bls bls-zjt"></a>
		<h1 class="flexitem center">阅读/分享</h1>
		<a href="javascript:;" class="bls bls-dian"></a>
	</div>
	<div class="flexitemv mainbox">
		<div class="flex center title">
			<span class="flex center read elect">阅读</span>
			<span class="flex center share">分享</span>
		</div>
		
		<div class="reads">
			<div class="listbox">
				<div class="flex centerv top">
					<div class="headimg">
						<img src="../image/banner.jpg" class="fitimg">
					</div>
					<div class="flexitemv info">
						<p class="flex centerv">轩轩</p>
						<p class="flex centerv">4小时前</p>
					</div>
					<div class="flex center">停留<em>33</em>秒</div>
				</div>
				<div class="flex lists">
					<div class="img">
						<img class="fitimg" src="../image/banner.jpg"/>
					</div>
					<div class="flexitemv cont">
						<a href="javascript:;" class="flexitemv">特斯拉创始人发表了15页的论文来描绘人类将如何殖民火星</a>
					</div>
				</div>
			</div>
			<div class="listbox">
				<div class="flex centerv top">
					<div class="headimg">
						<img src="../image/banner.jpg" class="fitimg">
					</div>
					<div class="flexitemv info">
						<p class="flex centerv">轩轩</p>
						<p class="flex centerv">4小时前</p>
					</div>
					<div class="flex center">停留<em>33</em>秒</div>
				</div>
				<div class="flex lists">
					<div class="img">
						<img class="fitimg" src="../image/banner.jpg"/>
					</div>
					<div class="flexitemv cont">
						<a href="javascript:;" class="flexitemv">特斯拉创始人发表了15页的论文来描绘人类将如何殖民火星</a>
					</div>
				</div>
			</div>
		</div>
		
		<div class="shares" style="display:none;">
			<div class="listbox">
				<div class="flex centerv top">
					<div class="headimg">
						<img src="../image/banner.jpg" class="fitimg">
					</div>
					<div class="flexitemv info">
						<p class="flex centerv">轩轩</p>
						<p class="flex centerv">4小时前</p>
					</div>
					<div class="flex center">分享给朋友</div>
				</div>
				<div class="flex lists">
					<div class="img">
						<img class="fitimg" src="../image/banner.jpg"/>
					</div>
					<div class="flexitemv cont">
						<a href="javascript:;" class="flexitemv">特斯拉创始人发表了15页的论文来描绘人类将如何殖民火星</a>
					</div>
				</div>
			</div>
			<div class="listbox">
				<div class="flex centerv top">
					<div class="headimg">
						<img src="../image/banner.jpg" class="fitimg">
					</div>
					<div class="flexitemv info">
						<p class="flex centerv">轩轩</p>
						<p class="flex centerv">4小时前</p>
					</div>
					<div class="flex center">分享给朋友</div>
				</div>
				<div class="flex lists">
					<div class="img">
						<img class="fitimg" src="../image/banner.jpg"/>
					</div>
					<div class="flexitemv cont">
						<a href="javascript:;" class="flexitemv">特斯拉创始人发表了15页的论文来描绘人类将如何殖民火星</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
<script type="text/javascript" src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<script type="text/javascript">
	$(".read").click(function(){
        $(".title span").removeClass('elect');
	    $(this).addClass('elect');
	    $('.reads').css({'display':'block'});
		$('.shares').css({'display':'none'});
	});
    $(".share").click(function(){
        $(".title span").removeClass('elect');
        $(this).addClass('elect');
        $('.shares').css({'display':'block'});
        $('.reads').css({'display':'none'});
    })
</script>
</html>